<!--
 * @Author: your name
 * @Date: 2021-08-03 13:36:05
 * @LastEditTime: 2021-08-05 15:25:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \getHome (2)\src\components\discounts\amend.vue
-->
<!--指定发券-->
<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>优惠卷管理</el-breadcrumb-item>
        <el-breadcrumb-item>指定发券</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="center" style="padding-top: 0px;">
      <div class="hander">指定发券</div>
      <div
        class="orderList"
        v-loading="isLoading"
        element-loading-text="优惠券发送中"
        element-loading-spinner="el-icon-loading"
      >
        <div class="entirety">
          <p class="basic">配置优惠券</p>
          <el-popover
            placement="right"
            width="600"
            trigger="click"
            v-model="visible"
          >
            <div class="result-container">
              <el-table :data="producList" border>
                <el-table-column width="60px" align="center">
                  <template v-slot="props">
                    <el-radio
                      :disabled="props.row.validStatus == 2"
                      v-model="couponNo"
                      :label="props.row.couponNo"
                      @change="handleRowChange(props.row)"
                      >{{ "" }}</el-radio
                    >
                  </template>
                </el-table-column>
                <el-table-column
                  label="优惠券名称"
                  prop="couponTitle"
                ></el-table-column>
                <el-table-column label="使用条件" prop="useConditions">
                  <template slot-scope="scope">
                    <div>
                      {{
                        scope.row.useConditions == 1
                          ? "固定模式"
                          : "循环叠加模式"
                      }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="发放数量"
                  prop="sendQuantity"
                ></el-table-column>
                <el-table-column label="状态" prop="validStatus">
                  <template>
                    <div>
                      {{ "有效" }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="有效期" prop="time" width="150">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.effectiveStartTime }}-
                      {{ scope.row.effectiveEndTime }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div style="margin-top: 20px; text-align:center;">
                <el-button slot="reference" @click="visible = false" class="but"
                  >取消
                </el-button>
                <el-button
                  style="background-color:#fd804c;color: #fff;"
                  @click="onSubmitData(Data)"
                  :disabled="len >= 1 ? true : false"
                  >确定
                </el-button>
              </div>
            </div>

            <el-pagination
              class="page"
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-size="pageSize"
              :total="total"
            >
            </el-pagination>
            <!-- <CouponList /> -->

            <el-button slot="reference" class="but" @click="isClick"
              >选择已有优惠券
            </el-button>
          </el-popover>
          <ConfigCouponList :ArrData="ArrData" :deleteTodo="deleteTodo" />
        </div>
        <div class="entirety">
          <p class="basic">优惠券发放对象</p>
          <div class="overall">
            <el-form ref="formData" :model="formData" label-width="100px">
              <el-form-item label="发放对象选择">
                <div class="radio">
                  <label
                    ><input
                      checked
                      type="radio"
                      name="sendUserType"
                      value="全部用户"
                      class="btn_anniu"
                      @click="change(1)"
                      :class="{ newStyle: number == 1 }"
                    />全部用户</label
                  >
                  <label>
                    <input
                      type="radio"
                      name="sendUserType"
                      value="通过用户ID发券"
                      class="btn_anniu"
                      @click="change(2)"
                      :class="{ newStyle: number == 2 }"
                    />通过用户ID发券</label
                  >
                </div>
                <div class="nei">
                  <div v-show="number === 2">
                    <p class="man">
                      <el-input
                        placeholder="多个用户ID，空格或逗号隔开"
                        v-model="memberNosData"
                        clearable
                        style="width: 250px;"
                      >
                      </el-input>
                    </p>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="发放时间">
                <div class="radio">
                  <label
                    ><input
                      checked
                      type="radio"
                      name="sendTimeType"
                      value="立即发放"
                      class="btn_anniu"
                      @click="changeTime(1)"
                      :class="{ newStyle: number == 1 }"
                    />立即发放</label
                  >
                  <label>
                    <input
                      type="radio"
                      name="sendTimeType"
                      value="按时发放"
                      class="btn_anniu"
                      @click="changeTime(2)"
                      :class="{ newStyle: isSelect == 2 }"
                    />按时发放</label
                  >
                </div>
                <div class="nei">
                  <div v-show="isSelect == 2">
                    <p class="man">
                      选择发放时间

                      <el-date-picker
                        v-model="formData.sendTime"
                        type="datetime"
                        placeholder="选择发放时间"
                      >
                      </el-date-picker>
                    </p>
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="cou"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ConfigCouponList from "./configCouponList.vue";

export default {
  name: "IssueStamps",

  components: { ConfigCouponList },
  inject: ["reload"],

  data() {
    return {
      formData: {
        memberNos: [],
        sendTime: "",
        sendTimeType: 1,
        sendUserType: 1,
        couponNo: ""
      },
      visible: false,
      Data: [],
      ArrData: [],
      memberNosData: null,
      producList: [],
      len: 0,
      isLoading: false,
      useConditions: "",
      radio: "1",
      text: "",
      selectLeng: null,
      couponNo: "",
      number: 1,
      isSelect: 1,
      pageIndex: 1,
      pageSize: 3,
      total: 0
    };
  },

  activated() {
    this.DetailByPage();
  },
  methods: {
    isClick() {
      this.DetailByPage();
    },
    change(index) {
      console.log("change,,,,,,", index);
      this.number = index; //重要处
      this.formData.sendUserType = index;
    },

    changeTime(index) {
      console.log("changeTime,,,,,,", index);

      this.isSelect = index; //重要处
      this.formData.sendTimeType = index;
    },
    //分页获取优惠券模板列表接口调用
    DetailByPage() {
      this.$http({
        url: "/couponadmin/v1/couponTemplate/getValidCouponTemplates",
        method: "GET",
        params: {
          pageNum: this.pageIndex,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.producList = res.data.list;
        this.total = parseInt(res.data.total);
      });
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.DetailByPage();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.DetailByPage();
    },
    // 选中的项
    handleRowChange(data) {
      this.Data = data;
      this.couponNo = data.couponNo;
    },
    //删除列表指定项
    deleteTodo(index, rows) {
      this.len = index;
      rows.splice(index, 1);
    },
    onSubmit() {
      console.log("this.formData,,,,,,", this.formData);

      this.isLoading = true;

      this.formData.memberNos =
        (this.memberNosData && this.memberNosData.split(",")) || [];

      this.formData.couponNo =
        this.ArrData[0] === undefined ? "" : this.couponNo;
      this.$http({
        url: "/couponadmin/v1/couponSend/insertCouponSendInfo",
        method: "POST",
        data: {
          memberNos: this.number === 1 ? [] : this.formData.memberNos,
          sendTime:
            this.formData.sendTime !== ""
              ? this.moment(this.formData.sendTime).format(
                  "yyyy-MM-DD HH:mm:ss"
                )
              : "",
          sendTimeType: this.formData.sendTimeType,
          sendUserType: this.formData.sendUserType,
          couponNos: [this.formData.couponNo]
        }
      })
        .then(res => {
          //console.log("res,,,,,,,,", res);
          //console.log("res,,,,dsds,,,,", !!res);

          if (!!res == true) {
            if (res.success == 0) {
              this.isLoading = false;

              this.$message.error(res.errorMsg);
            } else if (res.success == 1) {
              this.isLoading = false;
              this.$message.success("优惠券发放成功");
              this.reload();

              // this.$router.push({
              //   path: "/discounts"
              // });

              // this.formData = {
              //   memberNos: [],
              //   sendTime: "",
              //   sendTimeType: 1,
              //   sendUserType: 1,
              //   couponNo: ""
              // };
              // (this.number = this.formData.sendUserType),
              //   (this.visible = false),
              //   (this.Data = []),
              //   (this.ArrData = []),
              //   (this.memberNosData = null),
              //   (this.producList = []),
              //   (this.len = 0),
              //   (this.useConditions = ""),
              //   (this.radio = "1"),
              //   (this.text = ""),
              //   (this.selectLeng = null),
              //   (this.couponNo = ""),
              //   (this.isSelect = this.formData.sendTimeType);
            }
          }
        })
        .catch(err => {
          this.isLoading = false;
          this.$message.error("操作失败");
        });
    },
    onSubmitData(data) {
      //console.log("data,,,,,,,,,,,", data);
      if (data.length == 0) {
        this.selectLeng = 0;
        this.$message.error("请选择一项");
      } else {
        this.ArrData.push(data);
        (this.len = this.ArrData.length), (this.visible = false);
      }
    }
  }
};
</script>
<style scoped lang="scss">
.hander {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 900;
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.entirety {
  width: 95%;
  margin-left: 10px;
  border: 7px solid #fafafa;
  border-radius: 10px;
  .basic {
    font-size: 18px;
    font-weight: 900;
    margin-top: 2%;
    margin-bottom: 1%;

    margin-left: 1%;
  }
}
.overall {
  width: 100%;
  height: auto;
  display: flex;

  justify-content: space-between;
  margin-top: 3%;
  .left {
    width: 20%;
    height: auto;
  }
  .right {
    width: 80%;
    height: auto;
  }
}
.select {
  width: 65%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}
.selects {
  width: 55%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .dialog-footer,
  .choice {
    margin-left: 2%;
  }
}

/deep/ .but {
  background: #fd7097;
  color: #fff;
  margin-bottom: 1%;
}
</style>
